<template>
  <div class="detail-container">
    <detail-box>
      <div class="detail-info">
        <div class="detail-li">
          <div>
            <label>流状态：</label>
            <el-radio-group v-model="itemObj.StreamStatus" class="ml-4" @change="changeStatus">
              <el-radio label="1" size="large">启用</el-radio>
              <el-radio label="0" >禁用</el-radio>
            </el-radio-group>
          </div>
          <div><label>总流量：</label>{{$utils.formatFileSize(itemObj.Flow * 1000)}}</div>
          <div><label>创建时间：</label>{{itemObj.CreateTime}}</div>
        </div>
        <div class="detail-li">
          <div><label>推流IP：</label>{{itemObj.ClientIP}}</div>
          <div><label>观看人数：</label>{{itemObj.AllVisitor}}人次</div>
          <div><label>到期时间：</label>{{itemObj.ExpirationTime}}</div>
        </div>
        <div class="detail-li">
          <div><label>源节点：</label>{{itemObj.SNodeCount}} </div>
          <div><label>观看峰值：</label>{{itemObj.MaxVisitor}}人次</div>
        </div>
        <div class="detail-li">
          <div><label>拉流节点：</label>{{itemObj.PNodeCount}} </div>
          <div><label>直播时长：</label>{{setTime(itemObj.CreateTime,itemObj.ExpirationTime )}}</div>
        </div>
        <div class="detail-div">
          <div><label>推流地址：</label><el-input readonly v-model="itemObj.PushUrl" class="height-30" /><i class="el-icon-document-copy copy" @click="copyFn(itemObj.PushUrl)"></i></div>
        </div>
        <div class="detail-div">
          <div><label>RTMP地址：</label><el-input readonly v-model="itemObj.PullUrl_RTMP" class="height-30" /><i class="el-icon-document-copy copy" @click="copyFn(itemObj.PullUrl_RTMP)"></i></div>
        </div>
        <div class="detail-div">
          <div><label>HLS地址：</label><el-input readonly v-model="itemObj.PullUrl_HLS" class="height-30" /><i class="el-icon-document-copy copy" @click="copyFn(itemObj.PullUrl_HLS)"></i></div>
        </div>
        <div class="detail-div">
          <div><label>FLV地址：</label><el-input readonly v-model="itemObj.PullUrl_FLV" class="height-30" /><i class="el-icon-document-copy copy" @click="copyFn(itemObj.PullUrl_FLV)"></i></div>
        </div>
        <div class="detail-div">
          <div><label>WEB地址：</label><el-input readonly v-model="itemObj.PullUrl_WEB" class="height-30" /><i class="el-icon-document-copy copy" @click="copyFn(itemObj.PullUrl_WEB)"></i></div>
        </div>
      </div>
    </detail-box>
    <detail-box title="实时数据">
      <div class="detail-echart">
        <div class="echart1">
          <line-echart :nodes="streams" />
        </div>
        <div class="echart2">
          <Gauge-echart :nodes="streams" />
        </div>
        <div class="echart3">
          <area-echart :nodes="streams" />
        </div>
      </div>
    </detail-box>
    <div>节点信息：</div>
    <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
      <template #Type="scope">
        <span>{{setTypeVal(scope.soltval.Type)}}</span>
      </template>
      <template  #flow="scope" >
        <span>{{((Number(scope.soltval.InFlow) || 0) + (Number(scope.soltval.OutFlow) || 0)).toFixed(2) }}</span>
      </template>
    </ele-table>
  </div>
</template>
<script lang="ts" >
import { defineComponent, ref, getCurrentInstance, onUnmounted } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import DetailBox from '@/components/detail-box/index.vue';
import { useRouter, useRoute } from 'vue-router';
import lineEchart from "./components/lineEchart.vue";
import AreaEchart from "./components/areaEchart.vue";
import GaugeEchart from "./components/gaugeEchart/index.vue";
import {getrequest} from '@/plugins/axios3';
import { ElMessage } from "element-plus";


export default defineComponent({
  components:{
    eleTable,
    DetailBox,
    lineEchart,
    AreaEchart,
    GaugeEchart
},
  setup() {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const router = useRouter()
    const route = useRoute()
    const loading = ref(true);
    const dialogVisible = ref(false)
    const pageObj = ref({page:1,size:10,total:80})
    const streams: any = ref([])
    const itemObj: any = ref({})
    const tableTitleData = ref([
      { id: 1, label: '节点ID', prop: 'NodeID' },
      { id: 2, label: '节点类型',slotname:'Type', align: 'center' },
      { id: 3, label: '在线人数',prop:'CurVisitor', align: 'center' },
      { id: 4, label: '历史在线总人数',prop:'AllVistor', align: 'center' },
      { id: 5, label: '在线峰值',prop:'MaxVisitor' , align: 'center'},
      { id: 6, label: '出口带宽',prop:'OutBM' , align: 'center'},
      { id: 7, label: '入口带宽',prop:'InBM' ,align: 'center'},
      { id: 8, label: '流量',slotname:'flow' ,align: 'center'},
    ])
    const tableData = ref([
      { value: 3, key: '3-1' },
      { value: 4, key: '4-1'}
    ])
    const changePage = (val) =>{
      pageObj.value.page = val;
      initData()
    };
    const goBack = () => {
      router.go(-1)
    }
    const copyFn = (val: string) => {
      GL.$utils.copyFn(val)
    }
    const setTypeVal = (val: string) => {
      let name = ''
      if(val === 'PUSH') {
        name = '推流节点'
      } else if(val === 'PULL'){
        name = '拉流节点'
      } else {
        name = '源节点'
      }
      return name
    }
    // let num = 10
    const initData = async() => {
      const {StreamID, ServiceID} = route.query;
      await GL.$axios.get(GL.$api.video.QueryStreamList, {params: {StreamID, ServiceID, PageIndex:pageObj.value.page - 1, PageSize:pageObj.value.size}})
      .then((res: any) => {
        if (res.Code === 0) {
          res.Nodes.map(item => {
            item.InBM = item.InBM ? item.InBM.toFixed(2) : 0
            item.InFlow = item.InFlow? item.InFlow.toFixed(2): 0
            item.OutBM = item.OutBM ? item.OutBM.toFixed(2): 0
          })
          tableData.value = res.Nodes;
          streams.value = res.Streams
          itemObj.value = res.Streams[0]
          itemObj.value.StreamStatus = itemObj.value.StreamStatus !== 'Forbided' ? '1' : '0'
          loading.value = false;
          pageObj.value.total = res.NodeTotal;
        }
      })
      .catch((err: any) => {
        console.log(err);
        tableData.value = []
        loading.value = false;
      });
    }
    initData()
    let timer = setInterval(() => {
      initData()
    }, 10000)
    const setTime = (start, end) => {
      const val1 = new Date(start).getTime()
      const val2 = new Date(end).getTime()
      if(!isNaN(val1) && !isNaN(val2)) {
        const time = GL.$utils.HourFormat(val2 - val1)
        return time
      }
      return '--'
    }
    // 厂商
    const getQueryConfig = async() => {
      GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0}})
      .then((res: any) => {
        if(res.Code === 0) {
          sessionStorage.setItem('config', JSON.stringify(res.Services))
          return res.Service
        }
      })
    }
    let config = JSON.parse(sessionStorage.getItem('config') || '{}') || getQueryConfig()
    const getEnableLiveStream = () => {
      let Passwd;
      config.forEach(item => {
        if(item.ServiceID === itemObj.value.ServiceID) {
          Passwd = item.Passwd
        }
      })
      getrequest(GL.$api.video.EnableLiveStream, {params: {StreamID: itemObj.value.StreamID, ServiceID: itemObj.value.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
          ElMessage.success('启用直播视频成功')
          initData()
        }
      })
    }
    const getForbidLiveStream = () => {
      let Passwd;
      config.forEach(item => {
        if(item.ServiceID === itemObj.value.ServiceID) {
          Passwd = item.Passwd
        }
      })
      getrequest(GL.$api.video.ForbidLiveStream, {params: {StreamID: itemObj.value.StreamID, ServiceID: itemObj.value.ServiceID, Passwd}}).then((res) =>{
        const data = res.data;
        if(data.Code === 0) {
          ElMessage.success('禁用直播视频成功')
          initData()
        }
      })
    }
    const changeStatus = (val) => {
      if(val == 1) {
        getEnableLiveStream()
      } else {
        getForbidLiveStream()
      }
    }
    onUnmounted(() => {
      clearInterval(timer)
    })
    return {
      dialogVisible,
      tableTitleData,
      tableData,
      loading,
      pageObj,
      changePage,
      itemObj,
      streams,
      goBack,
      setTypeVal,
      setTime,
      changeStatus,
      copyFn
    }
  }
})

</script>
<style lang="scss" scoped>
.detail-container{
  .detail-info{
    .detail-li{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      div{
        width: 33%;
        display: flex;
        align-items: center;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
        }
      }
      label{
        width: 120px;
        text-align: right;
      }
    }
    .detail-div{
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      div{
        width: 100%;
        flex-wrap: nowrap;
        align-items: center;
        white-space:nowrap;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
        }
        .copy{
          margin-left: 20px;
        }
        label{
          display: inline-block;
        }
      }
      label{
        width: 120px;
        text-align: right;
      }
      .height-30{
        height: 30px;
        width: 500px;
      }
    }
  }
  .detail-echart{
    display: flex;
    .echart1, .echart2{
      width: 50%; 
    }
  }
  .glup-btn{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>